<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mustache底层核心机理</title>
</head>
<body>
    <script src="jslib/mustache.js"></script>
    <!-- mustache库不能使用简单的正则表达式思路实现 -->
    1. 将模板字符串 编译成 tokens
    2. 将data数据和tokens结合起来，生成dom字符串

    <!-- 底层tokens思想 -->
    tokens
        它是模板字符串的JS表现（二维数组）
        它是AST“抽象语法树”、“虚拟节点”等的开山鼻祖
    tokens里面的token分为text和name等形式，当模板字符串中有循环存在时，将会被编译为嵌套更深的tokens
    <script>
        var templateStr = `
            <ul>
                {{#arr}}
                    <li>
                        <div class="hd">{{name}}的基本信息</div>
                        <div class="bd">
                            <p>姓名：{{name}}</p>
                            <p>姓别：{{sex}}</p>
                            <p>年龄：{{age}}</p>
                        </div>
                    </li>
                {{/arr}}
            <ul>
        `
        var templateStr = `
            <ul>
                {{#arr}}
                    <li>
                        <div class="hd">{{name}}的基本信息</div>
                        <div class="bd">
                            <p>姓名：{{name}}</p>
                            <p>姓别：{{sex}}</p>
                            <p>年龄：{{age}}</p>
                        </div>
                        {{name}}的业余爱好是:
                        <ol>
                            {{#hobbies}}
                                {{.}}
                            {{/hobbies}}
                        </ol>
                    </li>
                {{/arr}}
            <ul>
        `
        var domStr = Mustache.render(templateStr, {})
    </script>
</body>
</html>